<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>Class Data</title>
    <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../css/global.css">
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../js/moment.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/global.js"></script>
</head>
<body>
<br>
<!-- 主要内容 -->
<div class="layui-fluid">
    <!--  筛选条件  -->
    <div class="lay-row">
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">查询条件</h2>
                    <div class="layui-colla-content layui-show">
                        <br>
                        <!-- 搜索条件表单 -->
                        <form class="layui-form">
                            <div class="layui-form-item layui-input-inline">
                                <label class="layui-form-label">班级名:</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="className" placeholder="请输入班级名" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <!--                            <div class="layui-form-item layui-input-inline">-->
                            <!--                                <label class="layui-form-label">人数(范围):</label>-->
                            <!--                                <div class="layui-input-inline">-->
                            <!--                                    <input type="number" name="count" placeholder="请输入班级人数"-->
                            <!--                                           autocomplete="off" class="layui-input">-->
                            <!--                                </div>-->
                            <!--                            </div>-->
                            <div class="layui-form-item layui-input-inline">
                                <div class="layui-input-inline">
                                    <button class="layui-icon layui-icon-search layui-btn layui-bg-blue"
                                            lay-submit
                                            type="submit"
                                            lay-filter="sreach_form">
                                        查询
                                    </button>
                                    <button class="layui-icon layui-icon-read layui-btn layui-btn-primary"
                                            type="reset">
                                        重置
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--  表格  -->
    <div class="lay-row">
        <div class="layui-col-md12">
            <table id="tb" lay-filter="tb" class="layui-table" ></table>
        </div>
    </div>
</div>

<!-- toolbar模板 -->
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button id="addBtn" class="layui-icon layui-icon-add-circle layui-btn layui-bg-green" lay-event="add"> 新增</button>
        <button id="deleteBatches" class="layui-icon layui-icon-delete layui-btn layui-bg-red" lay-event="del"> 批量删除</button>
    </div>
</script>
<!--tool模板-->
<script type="text/html" id="tool">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 添加新数据模板 -->
<script type="text/html" id="add">
    <div class="padding">
        <form class="layui-form" id="add_form">
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">班级名:</label>
                <div class="layui-input-inline">
                    <input type="text" name="className" lay-verify="required" placeholder="请输入班级名" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">班级人数:</label>
                <div class="layui-input-inline">
                    <input type="number" name="count" lay-verify="number" value="0" placeholder="请输入人数"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">建班日期:</label>
                <div class="layui-input-inline">
                    <input id="add_createDate"
                           type="text"
                           name="createDate"
                           placeholder="请选择建班日期"
                           lay-verify="required"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">所属专业:</label>
                <div class="layui-input-inline">
                    <select id="add_major_sel" name="majorId" lay-verify="required">
                        <option selected></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">辅导员:</label>
                <div class="layui-input-inline">
                    <select id="add_instructor_sel" name="instructorId" lay-verify="required">
                        <option selected></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <div class="layui-input-inline">
                    <input class="layui-icon layui-icon-search layui-btn layui-bg-blue"
                           lay-submit
                           type="hidden"
                           lay-filter="add_form"
                           id="add_form_btn">
                </div>
            </div>
        </form>
    </div>
</script>
<script>
    layui.use(['table', 'element', 'form', 'layer', 'laydate', 'laytpl'], async function () {
        let table = layui.table,
            element = layui.element,
            form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate,
            laytpl = layui.laytpl

        let curPerson
        let majors = []
        let instructors = []
        let ADD_PRIVILEGE = false
        let UPDATE_PRIVILEGE = false
        let DELETE_PRIVILEGE = false

        await created()


        // 渲染表格
        table.render({
            elem: '#tb'
            , height: 650
            , url: api.class.get //数据接口
            , headers: {
                'Cur-Person-Id': curPerson.id
            }
            , title: '班级信息表'
            , page: false // 开启分页
            , toolbar: '#toolbar'
            , cols: (() => {
                let col = [
                    {type: 'checkbox', fixed: 'left'}
                    // , {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                    , {field: 'className', title: '班级名', edit: UPDATE_PRIVILEGE}
                    , {field: 'count', title: '班级人数', edit: UPDATE_PRIVILEGE}
                    , {field: 'createDate', title: '建班时间', edit: UPDATE_PRIVILEGE}
                    , {field: 'majorName', title: '所属专业', edit: UPDATE_PRIVILEGE}
                    , {field: 'instructorName', title: '辅导员', edit: UPDATE_PRIVILEGE}
                ]
                if (DELETE_PRIVILEGE) {
                    col.push({fixed: 'right', width: 100, align: 'center', toolbar: '#tool'})
                }
                return [col]
            })()
            , parseData: function (res) {
                let realData = res.data.map(o => ({
                    id: o.id,
                    className: o.className,
                    count: o.count,
                    createDate: moment(o.createDate).format('YYYY-MM-DD'),
                    majorName: majors.find(m => m.id == o.majorId).majorName,
                    instructorName: instructors.find(p => p.id == o.instructorId).name
                }))
                return {
                    code: res.code,
                    msg: res.msg,
                    count: realData.length,
                    data: realData
                }
            }
            ,done : ()=>{
                // 判断是否要显示批量删除按钮, 单个删除的按钮在table中已经处理了
                if (!DELETE_PRIVILEGE) {
                    $("#deleteBatches").remove()
                }
                // 是否要移除增加按钮
                if(!ADD_PRIVILEGE){
                    $('#addBtn').remove()
                }
            }

        });
        // 监听头工具栏
        table.on('toolbar(tb)', async function (obj) {
            let checkStatus = table.checkStatus(obj.config.id)
                , checkedData = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    // 弹出新增用户的大框框
                    layer.open({
                        type: 1
                        , area: ['700px', '400px']
                        , title: '添加班级'
                        , shade: 0.6
                        , maxmin: true
                        , anim: 4
                        , content: $('#add').html(),
                        btn: ['添加', '算了'],
                        success: () => {
                            majors.forEach(o => $('#add_major_sel').append(new Option(o.majorName, o.id)))
                            instructors.forEach(o => $('#add_instructor_sel').append(new Option(o.name, o.id)))
                            laydate.render({
                                elem: '#add_createDate'
                                , format: 'yyyy-MM-dd'
                            });
                            form.render()
                        },
                        yes: async () => {
                            // 模拟点击add_form的提交按钮
                            $("#add_form_btn").click()
                        },
                        btn2: () => {
                            layer.closeAll()
                        }
                    });
                    break;
                case 'del':
                    // 批量删除
                    if (checkedData.length === 0) {
                        layer.msg('请至少选择一行');
                    } else {
                        layer.confirm('真的要删除所勾选的数据吗', async function (index) {
                            layer.load()
                            if ((await del(...checkedData.map(o => o.id)))) {
                                layer.closeAll()
                                table.reload('tb')
                                layer.msg('删除成功',{icon:6})
                            }else{
                                layer.closeAll()
                                layer.msg('删除失败',)
                            }
                        })
                    }
                    break;
            }
        });
        // 监听工具条
        table.on('tool(tb)', function ({event, data: o}) {
            switch (event) {
                case 'del':
                    layer.confirm('真的删除行么', async function (index) {
                        let loading = layer.load()
                        if ((await del(o.id))) {
                            layer.closeAll()
                            table.reload('tb')
                        }
                    })
                    break
            }
        })
        // 渲染表单
        form.render()
        // 监听搜索表单
        form.on('submit(sreach_form)', function (data) {
            table.reload('tb', {
                url: api.class.getLike,
                where: {
                    ...data.field
                }
            })
            return false;
        })
        // add模板表单的submit事件
        form.on('submit(add_form)', async function (data) {
            let loading = layer.load()
            let isOk = await add(data.field)
            if (isOk) {
                layer.close(loading)
                layer.msg('添加成功')
                table.reload('tb')
            }
            layer.closeAll()
            return false;
        })
        // 监听edit工具
        table.on('edit(tb)', async function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            layer.load()
            switch (field) {
                case 'majorName':
                    await upd({id: data.id, majorId: majors.find(m => m.majorName == value).id})
                    break
                case 'instructorName':
                    await upd({id: data.id, instructorId: instructors.find(i => i.name == value).id})
                    break
                default:
                    await upd({id: data.id, [field]: value})
                    break
            }
            layer.closeAll()
        });

        // add方法
        async function add(o) {
            return (await axios.get(api.class.add, {params: {...o}})).data.data
        }

        // del方法
        async function del(...ids) {
            return (await axios.delete(api.class.del, {data: ids})).data.data
        }

        // upd方法
        async function upd(o) {
            return (await axios.get(api.class.upd, {params: {...o}})).data.data
        }

        // Created方法
        async function created() {
            // 加载各种码表
            majors = (await axios(api.major.get)).data.data
            instructors = (await axios(api.person.get, {params: {personTypeId: 'persontype002'}})).data.data
            curPerson = localWareHouse.get('curPerson')
            ADD_PRIVILEGE = curPerson.abilities.some(code=>code=='ADD_CLASS')
            UPDATE_PRIVILEGE = curPerson.abilities.some(code=>code=='UPDATE_CLASS')
            DELETE_PRIVILEGE = curPerson.abilities.some(code=>code=='DELETE_CLASS')
        }
    })// layui.use...
</script>
</body>
</html>